<template>
  <div class="md5">
    <div>
      <div class="word">输入信息</div>
      <div class="input"><el-input v-model="keyword"></el-input></div>
      <div class="btn"><el-button @click="getMd5">转化</el-button></div>
      <div class="btn"><el-button @click="clear">清空</el-button></div>
      <div class="btn"><el-button @click="copy">复制</el-button></div>
    </div>
    <div>
      <div class="word">转化信息</div>
      <div class="input"><el-input v-model="md5Word" type="textarea" :rows="5" disabled=""></el-input></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import element  from '@/utils/element';
const md5 = require('js-md5')
const keyword = ref('')
const md5Word = ref('')
function getMd5() {
  md5Word.value = md5(keyword.value)
}
function clear() {
  keyword.value = ''
  md5Word.value = ''
}
function copy() {
  navigator.clipboard.writeText(md5Word.value).then(() => {
    element.success('复制成功')
  })
}
</script>

<style scoped lang="scss">
.md5 {
  >div {
    display: flex;
    margin-bottom: 10px;
    .word {
      width: 100px;
      color: #ccc;
      display: flex;
      font-size: 14px;
      justify-content: center;
      align-items: center;
    }

    .inpu {
      width: 600px;
    }

    .btn {
      width: 60px;
      margin-left: 10px;
    }
  }
}
</style>
